import React, { Component } from 'react'
import {Switch,Route,NavLink} from 'react-router-dom'
import './Index.css'
import Home from '../Home/Home'
import Cate from '../Cate/Cate'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'
export default class Index extends Component {
    render() {
        return (
            <div className='index'>
                {/* 二级路由出口 */}
                <Switch>
                    <Route path='/index/home' component={Home}></Route>

                    <Route path='/index/cate' component={Cate}></Route>

                    <Route path='/index/shop' component={Shop}></Route>

                    <Route path='/index/mine' component={Mine}></Route>
                </Switch>
                <footer className='index-navs'>
                    <NavLink to='/index/home'
                    activeStyle={{background:'orangered'}}>首页</NavLink>
                    <NavLink to='/index/cate'
                    activeStyle={{background:'orangered'}}>分类</NavLink>
                    <NavLink to='/index/shop'
                    activeStyle={{background:'orangered'}}>购物车</NavLink>
                    <NavLink to='/index/mine'
                    activeStyle={{background:'orangered'}}>我的</NavLink>
                </footer>
            </div>
        )
    }
}
